<template>
  <div class="MkActivityDetail">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class=" content-box">
      <div class="MkActivityDetailContent">
        <div class="content">
          <div class="upDiv">
            <div class="leftDiv">
              <div class="showBigImage" @click="viewImage">
                <img v-if='currentObj.posters && currentObj.posters.length>0' :src="currentObj.posters[0].accessUrl" alt="">
              </div>
              <!--<div class="showSmallImage">-->
                <!--<div class="imageList">-->
                  <!--<img src="../../../assets/logo.png" alt="">-->
                <!--</div>-->
                <!--<div class="imageList">-->
                  <!--<img src="../../../assets/logo.png" alt="">-->
                <!--</div>-->
                <!--<div class="imageList">-->
                  <!--<img src="../../../assets/logo.png" alt="">-->
                <!--</div>-->
              <!--</div>-->
            </div>
            <div class="rightDiv">
              <div class="activityTitle">{{currentObj.title}}</div>
              <div class="activityInfo">
                <div class="activityState">{{currentObj.status | status}}</div>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">活动时间</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.activityStartDate | formatDate('yyyy年MM月dd日 HH:mm')}} ~ {{currentObj.activityEndDate | formatDate('yyyy年MM月dd日 HH:mm')}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">报名时间</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.enterStartDate | formatDate('yyyy年MM月dd日 HH:mm')}} ~ {{currentObj.enterEndDate | formatDate('yyyy年MM月dd日 HH:mm')}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">活动地点</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.activityAddress}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">活动人数</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.limitPeopleAmount == 0||currentObj.limitPeopleAmount == ''?'不限':'限额'+currentObj.limitPeopleAmount+'人'}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">主办方</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.sponsor}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="fontColorThree textAlignRight">浏览量</el-col>
                  <el-col :span="20" class="fontColorTwo infoValue">{{currentObj.pvCount}}</el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div class="downDiv">
            <div class="activityDetailTitle">活动报名<el-button type='primary' class="btn-create floatRight" style="margin-top:7px;" @click="sendMessageMultiple">短信群发</el-button></div>
            <div class="gray_bg" style="border-bottom:2px solid #EDF1F2;margin-bottom:60px;padding-bottom:40px;">
              <el-table
                :data="dataArr.elements"
                style="width: 100%"
                v-loading="loadingTab"
                @selection-change="handleSelectionChange"
                element-loading-text="拼命加载中">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  show-overflow-tooltip
                  width="">
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="电话"
                  show-overflow-tooltip
                  width="">
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                  show-overflow-tooltip
                  width="">
                </el-table-column>
                <el-table-column
                  prop="enterDate"
                  label="报名时间"
                  show-overflow-tooltip
                  width="">
                </el-table-column>
                <el-table-column
                  prop=""
                  label=""
                  width="">
                  <template slot-scope='scope'>
                    <!--<el-button type="text" @click.stop='continueLease(scope.row.id)'>通知续约</el-button>-->
                    <el-popover placement="top" title="" trigger="hover" popper-class='MkPopover_tip defined_tip'>
                      <span>短信通知</span>
                      <i class="fa fa-envelope operationIconStyle"  slot="reference" @click="sendMessageOne(scope.row.id)"></i>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                v-if='dataArr.page!=""  && !loadingTab && dataArr.elements.length>0'
                @current-change="handleCurrentChange"
                :current-page="dataArr.page"
                :page-size="dataArr.size"
                layout="total, prev, pager, next"
                :total="dataArr.totalAmount">
              </el-pagination>
            </div>
            <div class="activityDetailTitle">活动内容</div>
            <div class="activityDetailText">
              <!--<el-scrollbar :wrapStyle="[{maxHeight:'780px'}]">-->
              <div  v-html ='currentObj.content' class="showDetailContent"></div>
              <!--</el-scrollbar>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible" size="large" custom-class="show-uploadfile" top="50%">
      <img :src="imageViewUrl" alt="" />
    </el-dialog>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import {mapState} from 'vuex'
  import activityService from '../../../services/activity'
//  import MkPermission from "../../../components/MkPermission"
  export default {
    name: 'MkActivityDetail',
    props: ['title', 'id'],
    components: {
      MkBreadcrumb
    },
    filters: {
      status(val) {
        switch (val) {
          case 'ActivityEnd' : return '活动已结束';
          case 'Draft' : return '草稿';
          case 'Enter' : return '报名中';
          case 'EnterEnd': return '报名已结束';
          case 'NoEnter': return '报名未开始';
          case 'Off': return '平台下架';
          case 'Revoked': return '已撤回';
          default: return '';
        }
      },
      formatDate (value,type) {
        if(value=='' || value==null || value==0){
          return '';
        }
        var date=new Date(value);
        return date.pattern(type)
      }
    },
    methods: {
      handleSelectionChange(selection) {
        this.selectionArr = selection;
      },
      sendMessageServe(peopleId) {
        activityService.sendMessageServer({activityId:this.currentId,enterPeopleIds:peopleId},data =>{
            this.$message.success('通知成功');
        })
      },
      sendMessageMultiple() {
        if(this.selectionArr.length == 0) {
            this.$message.warning('请选择要通知的人员');
            return;
        }
        let arr = [];
        for(var i= 0 ;i<this.selectionArr.length;i++) {
            arr.push(this.selectionArr[i].id);
        }
        this.sendMessageServe(arr.join(','))
      },
      sendMessageOne(peopleId) {
        this.sendMessageServe(peopleId);
      },
      viewImage() {
        this.imageViewUrl = this.currentObj.posters[0].accessUrl;
        this.imageDialogVisible = true;
      },
      handleCurrentChange(value) {
        this.searchCondition['page.pn'] = value;
        this.loadActivityPeople();
      },
      loadDetail() {
          activityService.loadActivityDetailServer({id:this.currentId},data=>{
            this.currentObj = data.data;
          })
      },
      loadActivityPeople() {
          this.loadingTab = true;
          activityService.loadActivityPeopleServer(this.searchCondition,data=>{
              this.dataArr = data.data;
              this.loadingTab = false;
          })
      }
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      articleItem: state => state.article.articleItem
    }),
    mounted: function () {
      this.currentId = this.$route.params.id;
      this.searchCondition.activityId = this.currentId;
      this.loadDetail();
      this.loadActivityPeople();
    },
    data() {

      return {
        selectionArr: [],
        imageViewUrl: '',
        imageDialogVisible: false,
        currentObj: {},
        currentId: '',
        loadingTab: false,
        searchCondition: {
          'page.pn':1,
          'page.size':10,
          activityId: ''
        },
        dataArr: {
          elements:[{
            title:'222'
                },{
              title:'222'
            },{
              title:'222'
            }],
          page: 1,
          size: 2,
          totalAmount: 12
        },
        breadcrumbData: {
          list: [
            {
              name: '运营',
              path: null,
              clickAble: false
            },{
              name: '活动管理',
              path: '/operationMgt/activityMgt',
              clickAble: true
            }, {
              name: '活动详情',
              path: null,
              clickAble: false
            }
          ],
          returnData: {
            isReturn: true, path: null
          },
          iconName: 'operation-icon'
        },
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .MkActivityDetail{
    .MkActivityDetailContent {
      background-color: #fff;
      padding: 60px 0 40px;
      .content {
        width: 1030px;
        margin: 0px auto;
        .upDiv {
          border-bottom:2px solid #EDF1F2;
          padding-bottom:60px;
          overflow: hidden;
          .leftDiv {
            float: left;
            width: 400px;
            .showBigImage {
              width: 400px;
              height: 400px;
              background: @borderColor;
              cursor: pointer;
              position: relative;
              img {
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                .my-transform(translate(-50%, -50%));
              }
            }
            .showSmallImage {
              margin-top: 10px;
              overflow: hidden;
              cursor: pointer;
              .imageList {
                width: 70px;
                height: 70px;
                background: @borderColor;
                float: left;
                margin: 5px;
                position: relative;
                img {
                  max-width: 100%;
                  max-height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  .my-transform(translate(-50%, -50%));
                }
              }
            }
          }
          .rightDiv {
            float: right;
            width: 600px;
            .activityTitle {
              font-size: 20px;
              color: @fontColorOne;
              margin-bottom:10px;
            }
            .activityInfo {
              background: #F6F7F8;
              margin-bottom: 5px;
              position: relative;
              padding: 20px 0 10px;
              /*.hasPublished{*/
                /*color:#4dbd74!important;*/
                /*border:3px solid #4dbd74!important;*/
              /*}*/
              .activityState {
                position: absolute;
                right: 0px;
                top:0px;
                .my-opacity(0.5);
                width:80px;
                text-align: center;
                height:80px;
                line-height: 80px;
                .my-transform(rotate(30deg));
                .my-border-radius(100%);
                font-size:14px;
                color:#F6A623;
                border:3px solid #F6A623;
              }
              .el-row {
                font-size: 14px;
                .el-col {
                  margin-bottom: 20px;
                }
                .infoValue {
                  padding-left: 20px;
                }
              }
            }
          }
        }
        .downDiv {
          .activityDetailTitle {
            height: 60px;
            font-size:20px;
            height: 100%;
            color: @fontColorOne;
            line-height: 60px;
            margin-top: 15px;
          }
          .el-checkbox{
            margin-right:0;
          }
          .activityDetailText {
            background:#F6F7F8;
            .showDetailContent{
              width:800px;
              padding:60px 0;
              margin:0px auto;
              text-align: left;
              font-size:14px;
              color:#506470;
              word-break:break-all;
              >pre{
                word-break:break-all; /* Internet Explorer 5.5+ */
                white-space: pre-wrap; /* Firefox */
              }
              img{
                max-width:100%;
                height:auto;
              }
            }
          }
        }
      }
    }
  }
</style>
